import * as THREE from 'three';
const model = new THREE.Group();
const lineGroup = new THREE.Group();//边界线组
const meshGroup = new THREE.Group();//区域填充组
const cityPointGroup = new THREE.Group();//城市热点组
const extrudeGroup = new THREE.Group()
const cirMeshGroup = new THREE.Group()
const prismMeshGroup = new THREE.Group()
const carLineGroup = new THREE.Group()
// const size = 1.2;
const mapHeight = 0.2
const loader = new THREE.FileLoader();
loader.setResponseType("json")
// 解析gdp文件数据
loader.load('/公交轨迹.json',(data)=>{ 
    data.coordinates.forEach((elem)=>{
        var pointArr = []
        for(var i= 0 ; i<elem.length;i+=2){
            pointArr.push(new THREE.Vector3(elem[i],elem[i+1],mapHeight + 0.001))
        }
        const geometry = new THREE.BufferGeometry();
        geometry.setFromPoints(pointArr)
        const material = new THREE.LineBasicMaterial({
            color: 0x00ffff
        });
        const line = new THREE.Line(geometry,material);
        carLineGroup.add(line)
    })
    
})
loader.load('/北京市.json',(data)=>{
    data.features.forEach((area)=>{
        // coordinates数据分为单组和多组，将单组的封装为多组
        if(area.geometry.type === 'Polygon'){
            area.geometry.coordinates = [area.geometry.coordinates]
        }
        lineGroup.add(moreLine(area.geometry.coordinates,mapHeight)) 
        meshGroup.add(shapeMesh(area.geometry.coordinates,area.properties.name,area.properties.center))
    })
    // lineGroup.position.z += mapHeight + 0.01 *mapHeight
    model.add(lineGroup,meshGroup,cityPointGroup,extrudeGroup,cirMeshGroup,prismMeshGroup,carLineGroup)
})

// 批量产生轮廓线
const moreLine = (coordinates,gdpvalue)=>{
    const groupLine = new THREE.Group();
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(elem[0],elem[1],0)
        })
        groupLine.add(oneLine(pointArr))
    });
    groupLine.position.z += gdpvalue+ 0.001*gdpvalue
    return groupLine
}
// 产生一条轮廓线
const oneLine = (pointArr)=>{
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array(pointArr);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    const material = new THREE.LineBasicMaterial({
        color: 0x006666
    });
    const line = new THREE.LineLoop(geometry,material);
    return line;
}
// 产生多边形面
const shapeMesh = (coordinates,name,lngLat)=>{
    var heartShape = [];//轮廓形状Shape集合
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(new THREE.Vector3(elem[0],elem[1],0))
        })
        const shape = new THREE.Shape(pointArr);
        heartShape.push(shape)
    });
    var material = new THREE.MeshLambertMaterial({
        color: 0x004444,
        // side: THREE.DoubleSide, //两面可见
    }); //材质对象
    var geometry = new THREE.ExtrudeGeometry( heartShape ,{
        depth: mapHeight, //拉伸长度
        bevelEnabled: false //无倒角
    });
    var mesh =  new THREE.Mesh( geometry, material )
    mesh.lngLat = lngLat
    mesh.name = name
    return mesh
}
function render() {
    extrudeGroup.traverse((obj)=>{
        if(obj.type === 'Mesh'){
            obj.rotation.z += 0.01
        }
    })
    cityPointGroup.traverse((obj)=>{
        if(obj.type === 'Mesh'){
            obj.scale.set(obj._s,obj._s,1)
            obj._s += 0.02
            // _s的值在2-3时，透明度在0-1之间变化，3-5时透明度在1-0之间变化
            if(obj._s < 3){
                obj.material.opacity = (obj._s - 2.0) * 1;
            }else if(obj._s<5 && obj._s >= 3){
                obj.material.opacity = 1 - (obj._s - 3) / 2;
            }else if(obj._s >= 5){
                obj._s = 2
            }

        }
    })   
    requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
    }
    render();
export {model,meshGroup,cirMeshGroup};